import Toolbar from './Toolbar';
import * as dateUtils from './dateUtils';

export default {
  props: {
    dateTimeFormat: Object,
    maxDate: Date,
    minDate: Date,
    displayDate: Date,
  },
  data() {
    const displayDate = [];
    if (Ext.isArray(this.displayDate)) {
      this.displayDate.forEach((item) => {
        const dd = dateUtils.cloneDate(item);
        dd.setDate(1);
        displayDate.push(dd);
      });
    } else {
      const dd = dateUtils.cloneDate(this.displayDate);
      dd.setDate(1);
      displayDate.push(dd);
    }
    return {
      displayDates: displayDate,
      slideType: 'next',
    };
  },
  methods: {
    changeDisplayDate(date) {
      const oldDate = this.displayDates[this.displayDates.length - 1];
      let displayDate = '';
      // 增加日期选择多选处理
      if (Ext.isArray(date)) {
        if (date[date.length - 1].getFullYear() === oldDate.getFullYear() && date[date.length - 1].getMonth() === oldDate.getMonth()) return;
        this.slideType = date[date.length - 1].getTime() > oldDate.getTime() ? 'next' : 'prev';
        displayDate = dateUtils.cloneDate(date[date.length - 1]);
      } else {
        if (date.getFullYear() === oldDate.getFullYear() && date.getMonth() === oldDate.getMonth()) return;
        this.slideType = date.getTime() > oldDate.getTime() ? 'next' : 'prev';
        displayDate = dateUtils.cloneDate(date);
      }
      displayDate.setDate(1);
      this.displayDates.push(displayDate);
      this.displayDates.splice(0, 1);
    },
    handleChange(val) {
      const displayDate = dateUtils.cloneDate(this.displayDates[this.displayDates.length - 1]);
      displayDate.setFullYear(displayDate.getFullYear() + val);
      this.changeDisplayDate(displayDate);
    },
    createMonth(h) {
      // 只取最后选中的那个 防止创建多个展示日期元素而重叠一起
      const lastChoosed = [this.displayDates[this.displayDates.length - 1]];
      return h('div', {
        staticClass: 'mu-datepicker-month',
      }, lastChoosed.map((displayDate, index) => h('transition', {
        props: {
          name: `mu-datepicker-slide-${this.slideType}`,
        },
        key: index,
      }, [
        h('div', {
          staticClass: 'mu-datepicker-month-slide',
          key: displayDate.getTime(),
        }, [this.createContent(h, displayDate)]),
      ])));
    },
    createContent(h, displayDate) {
      const monthArray = dateUtils.getMonthArray(displayDate);
      return h('div', {
        staticClass: 'mu-datepicker-month-content',
      }, monthArray.map((month, i) => h('div', {
        staticClass: 'mu-datepicker-month-row',
        key: i,
      }, month.map(date => this.createMonthButton(h, date)))));
    },
    // 增加日期选择多选处理
    isSelected(date) {
      if (Ext.isArray(this.displayDate)) {
        let flag = false;
        this.displayDate.forEach((item) => {
          if (date.getFullYear() === item.getFullYear() && date.getMonth() === item.getMonth()) {
            flag = true;
          }
        });
        return flag;
      }
      return date.getFullYear() === this.displayDate.getFullYear() && date.getMonth() === this.displayDate.getMonth();
    },
    createMonthButton(h, date) {
      const monthText = this.dateTimeFormat.getMonthList()[date.getMonth()];
      const maxDate = new Date(this.maxDate.getFullYear(), this.maxDate.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds());
      const minDate = new Date(this.minDate.getFullYear(), this.minDate.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds());
      const disabled = date.getTime() > maxDate.getTime() || date.getTime() < minDate.getTime();
      return h(
        'button',
        {
          staticClass: 'mu-month-button',
          attrs: {
            disabled,
          },
          class: {
            selected: this.isSelected(date),
          },
          on: {
            click: () => !disabled && this.$emit('change', date),
          },
        },
        [
          h('div', { staticClass: 'mu-month-button-bg' }),
          h('span', { staticClass: 'mu-month-button-text' }, monthText),
        ],
      );
    },
  },
  render(h) {
    return h(
      'div',
      {
        staticClass: 'mu-datepicker-month-container',
      },
      [
        h(Toolbar, {
          props: {
            slideType: this.slideType,
            type: 'year',
            displayDates: this.displayDates,
            dateTimeFormat: this.dateTimeFormat,
          },
          on: {
            click: () => this.$emit('changeView', 'year'),
            change: this.handleChange,
          },
        }),
        this.createMonth(h),
      ],
    );
  },
};
